import React, { memo, useEffect ,useState,useCallback,useRef} from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux';

import { Carousel } from 'antd';
import { LeftOutlined,RightOutlined } from '@ant-design/icons'

import {
  TopBannerWrapper,
  Content
} from './style'
import {
  getBannersAction
} from '../../store/actionCreator'
export default memo(function TopBanner() {

  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getBannersAction())
  },[dispatch])

  const { banners } = useSelector(state => ({
    banners:state.getIn(['recommend','banners'])
  }), shallowEqual)
  const [currentIndex, setcurrentIndex] = useState(0)
  const bgImg = banners[currentIndex] && banners[currentIndex].imageUrl + "?imageView&blur=40x20"
  const handleChange = useCallback((from,to) => {
      setcurrentIndex(to)
  }, [])
  const carouselRef = useRef()
  const prev = useCallback(() => {
    carouselRef.current.prev()
  },[])
  const next = useCallback(() => {
    carouselRef.current.next()
  },[])

  
  return (
    <TopBannerWrapper bgImg={bgImg}>
      <Content className="wrap-v2">
        <Carousel effect="fade" autoplay beforeChange={handleChange} ref={carouselRef}>
          {
            banners.map(item => {
              return (
                <div key={item.imageUrl}>
                  <img src={item.imageUrl} alt="" className="image"/>
                </div>
              )
            })
          }
        </Carousel>
        <div className="control">
          <LeftOutlined className="left" onClick={prev}/>
          <RightOutlined className="right" onClick={next}/>
        </div>
      </Content>
    </TopBannerWrapper>
  )
})
